/*
 *@description:首页统计图
 *@Author:@reynold
 *@Date:2025-03-22 11:04:46
 *@Update:2025-03-22 11:04:46
 *@Version: V1.0.0
*/
<template>
  <div class="dashboard">
    <div class="dash_header">
      <CardItem v-for="item in headerList" :key="item.id">
        <template #header>{{item.title}}</template>
        <template #contop>{{item.val}}</template>
        <template v-if="item.disc == 'progress'" #conbot><el-progress style="margin-top:8px" :text-inside="false" :stroke-width="12" :percentage="70" /></template>
        <template v-else-if="item.disc == 'current'" #conbot><div id="container" /></template>
        <template v-else #conbot>{{item.disc}}</template>
        <template #fooleft>{{item.fooTitlt}}</template>
        <template #fooright>{{item.fooVal}}</template>
      </CardItem>
    </div>
    <!-- 中间区域图标 -->
    <div class="dash_tag">
      <div v-for="(img,index) in list" :key="index" class="item">
        <div>
          <img width="32px" height="32px" :src="img.src" />
        </div>
        <div>{{img.name}}</div>
      </div>
    </div>
    <!-- 订单量 -->
    <div class="dash_content">
      <div class="title1">订单量</div>
      <div class="line"></div>
      <div class="chart_item">
        <div class="chart_item1">
          <h4>订单趋势</h4>
          <div id="chart_dom1" style="height:220px" />
        </div>
        <div class="chart_item2">
          <h4>订单量排行</h4>
          <div v-for="item in order" :key="item.id" class="chart_dom2">
            <div class="phang">
              <span class="phang_item1">{{ item.id }}</span>
              <span class="phang_item2">{{ item.name }}</span>
              <span class="phang_item3">{{ item.num }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部评价 -->
    <div class="dash_footer">
      <div class="commen_item1">
        <div class="commen_item_title">平均评价</div>
        <div class="commen_item_line">
          <div style="padding:18px">
            <h2 class="pingfen">4.5</h2>
            <el-rate
              v-model="value"
              style="display:inline;color:38px"
              disabled
              text-color="#ff9900"
            />
            <el-progress style="margin-bottom:10px;margin-top:20px" :percentage="percentage" :color="customColors" />
            <el-progress style="margin-bottom:10px" :percentage="percentage1" :color="customColors" />
            <el-progress style="margin-bottom:10px" :percentage="percentage2" :color="customColors" />
            <el-progress style="margin-bottom:10px" :percentage="percentage3" :color="customColors" />
            <el-progress style="margin-bottom:10px" :percentage="percentage4" :color="customColors" />
          </div>
        </div>
      </div>
      <div class="commen_item2">
        <div class="commen_item_title">用户</div>
        <div class="commen_item_line" />
        <div id="commen_item2_dom" />
      </div>
      <div class="commen_item3">
        <div class="commen_item_title">本月目标</div>
        <div class="commen_item_line">
          <div style="width:126px;margin:0 auto;text-aglin:center;padding-top:3em">
            <el-progress type="dashboard" :percentage="percentage" color="#1989fa" />
            <p style="width:300px;font-size:14px;color:#515a6e;margin-top:6px">恭喜！本月目标已达标</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CardItem from './cardItem.vue'
import dashboardDatas from './dashboard.js'
import { Area } from '@antv/g2plot'
import { Column } from '@antv/g2plot'
import { Pie } from '@antv/g2plot'
import yonghu from '../../../public/imgs/用户.png'
import fenxi from '../../../public/imgs/分析.png'
import biaoqian from '../../../public/imgs/标签.png'
import xiaoxi from '../../../public/imgs/消息.png'
import piaoju from '../../../public/imgs/票据.png'
import dingdan from '../../../public/imgs/订单.png'
import chanpin from '../../../public/imgs/购物车.png'
import peizhi from '../../../public/imgs/配置.png'
export default {
  data(){
    return{
      value:0,
      percentage:70,
      percentage1:60,
      percentage2:80,
      percentage3:60,
      percentage4:65,
      customColors:'#bff2d9',
      list:[
        { name: '用户', src: yonghu },
        { name: '分析', src: fenxi },
        { name: '标签', src: biaoqian },
        { name: '消息', src: xiaoxi },
        { name: '票据', src: piaoju },
        { name: '订单', src: dingdan },
        { name: '产品', src: chanpin },
        { name: '配置', src: peizhi }
      ],
      data: [
        {
          'timePeriod': '2006 Q3',
          'value': 1
        },
        {
          'timePeriod': '2006 Q4',
          'value': 1.08
        },
        {
          'timePeriod': '2007 Q1',
          'value': 1.17
        },
        {
          'timePeriod': '2007 Q2',
          'value': 1.26
        },
        {
          'timePeriod': '2007 Q3',
          'value': 1.34
        },
        {
          'timePeriod': '2007 Q4',
          'value': 1.41
        },
        {
          'timePeriod': '2008 Q1',
          'value': 1.52
        },
        {
          'timePeriod': '2008 Q2',
          'value': 1.67
        },
        {
          'timePeriod': '2008 Q3',
          'value': 1.84
        },
        {
          'timePeriod': '2008 Q4',
          'value': 2.07
        },
        {
          'timePeriod': '2009 Q1',
          'value': 2.39
        },
        {
          'timePeriod': '2009 Q2',
          'value': 2.71
        },
        {
          'timePeriod': '2009 Q3',
          'value': 3.03
        },
        {
          'timePeriod': '2009 Q4',
          'value': 3.33
        },
        {
          'timePeriod': '2010 Q1',
          'value': 3.5
        },
        {
          'timePeriod': '2010 Q2',
          'value': 3.37
        },
        {
          'timePeriod': '2010 Q3',
          'value': 3.15
        },
        {
          'timePeriod': '2010 Q4',
          'value': 3.01
        },
        {
          'timePeriod': '2011 Q1',
          'value': 2.8
        },
        {
          'timePeriod': '2011 Q2',
          'value': 2.8
        },
        {
          'timePeriod': '2011 Q3',
          'value': 2.84
        },
        {
          'timePeriod': '2011 Q4',
          'value': 2.75
        },
        {
          'timePeriod': '2012 Q1',
          'value': 2.64
        },
        {
          'timePeriod': '2012 Q2',
          'value': 2.55
        },
        {
          'timePeriod': '2012 Q3',
          'value': 2.46
        },
        {
          'timePeriod': '2012 Q4',
          'value': 2.45
        },
        {
          'timePeriod': '2013 Q1',
          'value': 2.57
        },
        {
          'timePeriod': '2013 Q2',
          'value': 2.68
        },
        {
          'timePeriod': '2013 Q3',
          'value': 2.8
        },
        {
          'timePeriod': '2013 Q4',
          'value': 2.89
        },
        {
          'timePeriod': '2014 Q1',
          'value': 2.85
        },
        {
          'timePeriod': '2014 Q2',
          'value': 2.73
        },
        {
          'timePeriod': '2014 Q3',
          'value': 2.54
        },
        {
          'timePeriod': '2014 Q4',
          'value': 2.32
        },
        {
          'timePeriod': '2015 Q1',
          'value': 2.25
        },
        {
          'timePeriod': '2015 Q2',
          'value': 2.33
        },
        {
          'timePeriod': '2015 Q3',
          'value': 2.53
        },
        {
          'timePeriod': '2015 Q4',
          'value': 2.74
        },
        {
          'timePeriod': '2016 Q1',
          'value': 2.76
        },
        {
          'timePeriod': '2016 Q2',
          'value': 2.61
        },
        {
          'timePeriod': '2016 Q3',
          'value': 2.35
        },
        {
          'timePeriod': '2016 Q4',
          'value': 2.11
        },
        {
          'timePeriod': '2017 Q1',
          'value': 2.08
        },
        {
          'timePeriod': '2017 Q2',
          'value': 2.2
        },
        {
          'timePeriod': '2017 Q3',
          'value': 2.38
        },
        {
          'timePeriod': '2017 Q4',
          'value': 2.59
        },
        {
          'timePeriod': '2018 Q1',
          'value': 2.63
        },
        {
          'timePeriod': '2018 Q2',
          'value': 2.67
        },
        {
          'timePeriod': '2018 Q3',
          'value': 2.64
        },
        {
          'timePeriod': '2018 Q4',
          'value': 2.5
        },
        {
          'timePeriod': '2019 Q1',
          'value': 2.31
        },
        {
          'timePeriod': '2019 Q2',
          'value': 2.04
        },
        {
          'timePeriod': '2019 Q3',
          'value': 1.83
        },
        {
          'timePeriod': '2019 Q4',
          'value': 1.71
        },
        {
          'timePeriod': '2020 Q1',
          'value': 1.65
        },
        {
          'timePeriod': '2020 Q2',
          'value': 1.59
        },
        {
          'timePeriod': '2020 Q3',
          'value': 1.58
        }
      ],
      order: [
        { id: 1, name: '家居洗护', num: 367 },
        { id: 2, name: '衣物洗涤', num: 456 },
        { id: 3, name: '看护婴幼儿', num: 124 },
        { id: 4, name: '房屋开荒', num: 467 },
        { id: 5, name: '家庭教育', num: 788 },
        { id: 6, name: '家庭便餐', num: 987 },
        { id: 7, name: '打蜡', num: 12 }
      ],
    }
  },
  methods:{
    // 加载订单量折线图
    load() {
      const area = new Area('container', {
        data: this.data,
        xField: 'timePeriod',
        yField: 'value',
        // xAxis: {
        //   range: [0, 1],
        // },
        xAxis: false,
        yAxis: false,
        color: '#00CC66'
      })
      area.render()
    },
    // 加载订单趋势柱状图
    loadChart() {
      const data = [
        {
          type: '1月',
          sales: 38
        },
        {
          type: '2月',
          sales: 52
        },
        {
          type: '3月',
          sales: 61
        },
        {
          type: '4月',
          sales: 145
        },
        {
          type: '5月',
          sales: 48
        },
        {
          type: '6月',
          sales: 38
        },
        {
          type: '7月',
          sales: 38
        },
        {
          type: '8月',
          sales: 38
        }
      ]

      const columnPlot = new Column('chart_dom1', {
        data,
        xField: 'type',
        yField: 'sales',
        color: 'l(270) 0:#1495EB 1:#75D1FF',
        label: {
          // 可手动配置 label 数据标签位置
          position: 'middle', // 'top', 'bottom', 'middle',
          // 配置样式
          style: {
            fill: '#FFFFFF',
            opacity: 0.6
          }
        },
        xAxis: {
          label: {
            autoHide: true,
            autoRotate: false
          },
          line: {
            color: '#333'
          }
        },
        meta: {
          type: {
            alias: '类别'
          },
          sales: {
            alias: '销售额'
          }
        }
      })

      columnPlot.render()
    },
    loadCommen() {
      const data = [
        { type: '顾客', value: 27 },
        { type: '员工', value: 25 },
        { type: '管理员', value: 18 }
      ]

      const piePlot = new Pie('commen_item2_dom', {
        appendPadding: 10,
        data,
        angleField: 'value',
        colorField: 'type',
        radius: 1,
        innerRadius: 0.6,
        label: {
          type: 'inner',
          offset: '-50%',
          content: '{value}',
          style: {
            textAlign: 'center',
            fontSize: 14
          }
        },
        interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
        statistic: {
          title: false,
          content: {
            style: {
              whiteSpace: 'pre-wrap',
              overflow: 'hidden',
              textOverflow: 'ellipsis'
            },
            formatter: () => 'AntV\nG2Plot'
          }
        }
      })

      piePlot.render()
    }
  },
  components:{
    CardItem
  },
  computed:{
    headerList(){
      return dashboardDatas.headerDatas
    }
  },
  created(){
    setTimeout(() => {
      this.load()
      this.loadChart()
      this.loadCommen()
    }, 500)
  }
}
</script>

<style lang="less" scoped>
.dashboard {
  height: 100vh;

  .dash_header{
    display: flex;
    justify-content: space-between;
    #container {
      height: 42px;
    }
  }
  .dash_tag{
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    .item{
      width: 100px;
      height: 93px;
      background-color: #fff;
      padding: 16px;
      border-radius: 4px;
    }
    .item:hover{
      box-shadow: #ccc 0px 0px 12px;
      cursor: pointer;
    }
    .item div {
      text-align: center;
      font-size: 14px;
      color: #515a6e;
    }
    .item div:last-child{
      margin-top: 10px;
    }
  }
  // 订单量区域样式
  .dash_content{
    height: 365px;
    background-color: #fff;
    margin-top: 20px;
    border-radius: 5px;
    .title1{
      height: 48px;
      padding: 0 20px;
      line-height: 48px;
      color: #515a6e;
      font-size: 14px;
    }
    .line{
      height: 1px;
      background-color: #E8EAEC;
    }
    .chart_item{
      display: flex;
      .chart_item1{
        flex: 1.7;
        height: 317px;
        padding: 0 20px;
      }
      .chart_item2{
        flex: 1;
        height: 317px;
        padding: 0 20px;
        .chart_dom2 .phang {
          height: 28px;
          margin-bottom: 8px;
          .phang_item1 {
            display: inline-block;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background-color: #E6F6FF;
            line-height: 22px;
            text-align: center;
            color: #1791FF;
          }
          .phang_item2 {
            margin-left: 6px;
            font-size: 13px;
            color: #515a6e;
          }
          .phang_item3 {
            float: right;
            font-size: 13px;
            color: #515a6e;
            line-height: 2;
          }
        }
      }
    }
  }
  // 底部评价样式
  .dash_footer{
    display: flex;
    justify-content: space-around;
    margin-top: 1em;
    .commen_item_title {
      padding: 0 18px;
      height: 45px;
      line-height: 45px;
      color: #515a6e;
      font-size: 14px;
    }
    .commen_item_line {
      height: 1px;
      background-color: #E8EAEC;
    }
    .commen_item1 {
      flex: 2;
      height: 260px;
      margin-right: 1em;
      border-radius: 4px;
      background-color: #fff;
      .pingfen {
        display: inline;
        font-size: 48px;
        color: #515a6e;
        font-weight: 400;
        margin-right: 18px;
      }
    }
    .commen_item2 {
      flex: 1;
      height: 260px;
      margin-right: 1em;
      border-radius: 4px;
      background-color: #fff;
      #commen_item2_dom{
        height: 200px;
      }
    }
    .commen_item3 {
      flex: 1;
      height: 260px;
      margin-right: 1em;
      border-radius: 4px;
      background-color: #fff;
    }
  }
}
</style>